<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入样式 -->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<style type="text/css">
			* {
				font-size: 14px;
			}

			.space-margin {
				margin-top: 10px;
			}
		</style>
	</head>
	<body>
		<div id="news" style="padding: 0 20px;">
			<div v-if="newType !== 3">
				<div style="text-align: center;font-weight: bold;position: relative;">
					<a style="cursor: pointer;font-size: 16px;" @click="newType = 1">新闻资讯</a>
					<div style="position: absolute;right: 20px;top: 0;">
						<el-switch
						  v-model="isSort"
						  active-text="时间"
						  inactive-text="权重">
						</el-switch>
					</div>
				</div>
				<div style="margin-top: 15px;">
					<el-input placeholder="请输入内容" v-model="keyword">
						<template slot="append">
							<el-button slot="append" icon="el-icon-search" @click="searchNews(true)">搜索</el-button>
						</template>
					</el-input>
				</div>
				<div v-if="newType === 1" style="display: flex;flex-direction: row;" class="space-margin">
					<div style="flex: 3;">
						<el-breadcrumb separator="/">
							<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
							<el-breadcrumb-item><a href="/">推荐</a></el-breadcrumb-item>
						</el-breadcrumb>
						<div v-infinite-scroll="loadMore" :style="{overflow:'auto', height: currentHeight + 'px', width: '100%'}" class="space-margin">
							<template v-for="item in news.recommend">
								<div class="infinite-list-item" class="space-margin">
									<el-row>
										<el-col :span="18"><a style="color: #2877FF;cursor: pointer;" @click="showNewsDetail(item)">{{item.title}}</a></el-col>
										<el-col style="text-align: right;" :span="6"><span>{{item.newsDate}}</span></el-col>
									</el-row>
									<el-row class="space-margin">
										{{item.newsContext | filterContext}}
									</el-row>
								</div>
								<el-divider></el-divider>
							</template>
						</div>
					</div>
					<div style="flex: 2;padding: 0 0 0 20px;">
						<div style="text-align: center;color: #FF0000;font-size: 14px;">新闻热点</div>
						<div :style="{overflow:'auto', height: currentHeight + 'px', width: '100%'}" class="space-margin">
							<template v-for="item in news.hot">
								<div class="infinite-list-item" class="space-margin">
									<el-row style="">
										<el-col :span="18"><a style="color: #2877FF;cursor: pointer;" @click="showNewsDetail(item)">{{item.title | filterHotContext}}</a></el-col>
										<el-col style="text-align: right;color: #CCC;" :span="6"><span>{{item.newsDate}}</span></el-col>
									</el-row>
									<div style="margin: 10px 0;"></div>
									<!-- <el-row class="space-margin">
										{{item.newsContext | filterContext}}
									</el-row> -->
								</div>
							</template>
						</div>
					</div>
				</div>
				<div v-if="newType === 2" style="display: flex;flex-direction: row;" class="space-margin">
					<div v-infinite-scroll="loadMore" :style="{overflow:'auto', height: currentHeight + 'px', width: '100%'}" class="space-margin">
						<template v-for="item in news.search">
							<div class="infinite-list-item" class="space-margin">
								<el-row>
									<el-col :span="18"><a style="color: #2877FF;cursor: pointer;" @click="showNewsDetail(item)">{{item.title}}</a></el-col>
									<el-col style="text-align: right;" :span="6"><span>{{item.newsDate}}</span></el-col>
								</el-row>
								<el-row class="space-margin">
									{{item.newsContext | filterContext}}
								</el-row>
							</div>
							<el-divider></el-divider>
						</template>
					</div>
				</div>
			</div>
			<div v-if="newType === 3">
				<el-button type="text" @click="newType = 2">返回</el-button>
				<div style="text-align: center;font-size: 20px;font-weight: bold;">{{currentNews.title}}</div>
				<div class="space-margin" style="line-height: 30px;font-size: 15px;">{{currentNews.newsContext}}</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		axios.defaults.baseURL = 'http://localhost:9527/'
		new Vue({
			el: '#news',
			data: function() {
				return {
					keyword: '',
					count: 10,
					news: {
						recommend: [],
						hot: [],
						search: [],
						keywords: []
					},
					newType: 1,
					currentNews: {},
					currentHeight: 0,
					currentPage: 1,
					isSort: false
				}
			},
			methods: {
				loadMore() {
					if (this.newType == 1) {
						this.recommendNews(false)
					}
					if (this.newType == 2) {
						this.searchNews(false)
					}
				},
				searchNews(type) {
					this.$loading()
					type ? this.currentPage = 1 : this.currentPage ++
					var params = {
						searchWord: this.keyword,
						pageNo: this.currentPage,
						pageSize: 5,
						isSort: this.isSort,
						type: 1
					}
					axios.get('test/es', {
							params
						})
						.then(r => {
							if (type) { //如果是搜索模式，每次赋予新的值
								this.news.search = r.data.data
							} else { //否则，进行数据追加
								this.news.search = this.news.search.concat(r.data.data)
							}
							this.newType = 2
							this.$loading().close()
						}).catch(error => {
							this.$loading().close()
							console.log(error)
						})
				},
				hotNews() {
					var params = {
						searchWord: '',
						pageNo: 1,
						pageSize: 10,
						isSort: this.isSort,
						type: 3
					}
					axios.get('test/es', {
							params
						})
						.then(r => {
							this.news.hot = r.data.data
						}).catch(error => {
							console.log(error)
						})
				},
				hotKeyWords() {
					var params = {
						searchWord: '',
						pageNo: 1,
						pageSize: 10,
						isSort: this.isSort,
						type: 2
					}
					axios.get('test/es', {
							params
						})
						.then(r => {
							this.news.keywords = r.data.data
						}).catch(error => {
							console.log(error)
						})
				},
				recommendNews(type) {
					this.$loading()
					type ? this.currentPage = 1 : this.currentPage ++
					var params = {
						searchWord: '',
						pageNo: this.currentPage,
						pageSize: 10,
						isSort: this.isSort,
						type: 4
					}
					
					axios.get('test/es', {
							params
						})
						.then(r => {
							if (type) { //如果是搜索模式，每次赋予新的值
								this.news.recommend = r.data.data
							} else { //否则，进行数据追加
								this.news.recommend = this.news.recommend.concat(r.data.data)
							}
							this.$loading().close()
						}).catch(error => {
							console.log(error)
							this.$loading().close()
						})
				},
				showNewsDetail (item) {
					this.newType = 3
					this.currentNews = item
				}
			},
			mounted() {
				this.recommendNews(true)
				this.hotKeyWords()
				this.hotNews()
			},
			filters: {
				filterContext(value) {
					if (!value) return ''
					if (value.length > 80) {
						return value.slice(0, 80) + '...'
					}
					return value
				},
				filterHotContext(value) {
					if (!value) return ''
					if (value.length > 25) {
						return value.slice(0, 25) + '...'
					}
					return value
				}
			},
			beforeMount () {
				var height = 140
				var h = document.documentElement.clientHeight || document.body.clientHeight;
				this.currentHeight = h - height; //减去页面上固定高度height
				console.log(this.currentHeight)
			},
			watch: {
				isSort () {
					this.recommendNews(true)
					this.hotKeyWords()
					this.hotNews()
				}
			}
		})
	</script>
</html>
